import { Button, Input, Modal, Radio, Text } from "@nextui-org/react";
import { BASEURL } from "./config";
import { Notification } from "@douyinfe/semi-ui";
import { mutate } from "swr";

export default function NewStudent(props) {
  const {
    newDialogVisiable,
    setNewDialogVisiable,
    newDialogData,
    setNewDialogData,
  } = props;
  return (
    <Modal
      closeButton
      aria-labelledby="新增学生信息"
      open={newDialogVisiable}
      onClose={() => setNewDialogVisiable(false)}
    >
      <Modal.Header>
        <Text b id="modal-title" size={18}>
          新增学生信息
        </Text>
      </Modal.Header>
      <Modal.Body>
        <Input
          color="primary"
          size="lg"
          label="届次"
          type="number"
          initialValue={newDialogData.year}
          onChange={(e) => {
            setNewDialogData({
              ...newDialogData,
              year: e.target.value,
            });
          }}
        />
        <Input
          color="primary"
          size="lg"
          label="班级"
          type="text"
          initialValue={newDialogData.class}
          onChange={(e) => {
            setNewDialogData({
              ...newDialogData,
              class: e.target.value,
            });
          }}
        />
        <Input
          color="primary"
          size="lg"
          label="学生姓名"
          type="text"
          initialValue={newDialogData.name}
          onChange={(e) => {
            setNewDialogData({
              ...newDialogData,
              name: e.target.value,
            });
          }}
        />
        <Radio.Group
          label="性别"
          row
          size="sm"
          initialValue={newDialogData.sex}
          onChange={(e) => {
            setNewDialogData({
              ...newDialogData,
              sex: e,
            });
          }}
        >
          <Radio value="男">男</Radio>
          <Radio value="女">女</Radio>
        </Radio.Group>
        <Input
          color="primary"
          size="lg"
          label="身份证号"
          type="text"
          initialValue={newDialogData.id_number}
          onChange={(e) => {
            setNewDialogData({
              ...newDialogData,
              id_number: e.target.value,
            });
          }}
        />
        <Input
          color="primary"
          size="lg"
          label="手机号"
          type="number"
          initialValue={newDialogData.phone_number}
          onChange={(e) => {
            setNewDialogData({
              ...newDialogData,
              phone_number: e.target.value,
            });
          }}
        />
      </Modal.Body>
      <Modal.Footer>
        <Button auto flat onClick={() => setNewDialogVisiable(false)}>
          关闭
        </Button>
        <Button
          auto
          onClick={() => {
            if (
              newDialogData.year &&
              newDialogData.class &&
              newDialogData.name &&
              newDialogData.id_number &&
              newDialogData.phone_number &&
              newDialogData.sex
            ) {
              fetch(
                `${BASEURL}/students/${newDialogData.year}/${newDialogData.class}`,
                {
                  method: "POST",
                  headers: {
                    Authorization: `Bearer ${localStorage.getItem("token")}`,
                  },
                }
              ).then(() => {
                fetch(
                  `${BASEURL}/students/${newDialogData.year}/${newDialogData.class}/${newDialogData.name}`,
                  {
                    method: "POST",
                    headers: {
                      "Content-Type": "application/json",
                      Authorization: `Bearer ${localStorage.getItem("token")}`,
                    },
                    body: JSON.stringify({
                      id_number: newDialogData.id_number,
                      phone_number: newDialogData.phone_number,
                      sex: newDialogData.sex,
                    }),
                  }
                )
                  .then((res) => res.json())
                  .then((res) => {
                    if (typeof res.detail === "undefined") {
                      Notification.success({
                        content: `修改成功`,
                      });
                    } else {
                      Notification.error({
                        content: `修改失败 ${res.detail.msg}`,
                      });
                    }
                    mutate(`${BASEURL}/students`);
                  })
                  .catch((err) => {
                    Notification.error({
                      content: `修改失败 ${err}`,
                    });
                  });
              });
              setNewDialogVisiable(false);
              setNewDialogData({});
            } else {
              Notification.error({
                content: `请填写完整信息`,
              });
            }
          }}
        >
          提交
        </Button>
      </Modal.Footer>
    </Modal>
  );
}
